<template class="menu">
    <el-container>
        <el-aside width="300px">
            <el-menu :default-openeds="childRoutes" unique-opened='true'>
                <el-submenu index="1">
                    <template #title>
                        <i class="el-icon-location"></i>
                        <span>创建歌单</span>
                    </template>
                    <template v-for="item in createdPlayList" :key="item.id">
                        <el-menu-item @click="navToPlayList(item.id)" class='menu-item'>
                            <template #title>
                                <span>
                                    <img class="menu-coverImg" :src="item.coverImgUrl"/>
                                    <span class="aa">{{ item.name}}</span>
                                </span>
                                <span>{{item.trackCount}}首</span>
                            </template>
                        </el-menu-item>
                    </template>
                </el-submenu>
                <el-submenu index="2">
                    <template #title>
                        <i class="el-icon-location"></i>
                        <span>收藏歌单</span>
                    </template>
                    <template v-for="item in collecionPlayList" :key="item.id">
                        <el-menu-item @click="navToPlayList(item.id)" class='menu-item'>
                            <template #title>
                                <span>
                                    <img class="menu-coverImg" :src="item.coverImgUrl"/>
                                    <span class="aa">{{ item.name}}</span>
                                </span>
                                <span>{{item.trackCount}}首</span>
                            </template>
                        </el-menu-item>
                    </template>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <title>111</title>
            </el-header>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { musicRoutes } from '../../router/'
import { getPlaylist } from '../../api/music'
export default defineComponent({
    computed: {
        childRoutes() {
            return musicRoutes.children
        }
    },
    setup (){
        onMounted(() => {
            showPlaylist()
        })
        interface Reactive{
            createdPlayList: Array<any>
            collecionPlayList: Array<any>
        }
        const router = useRouter()
        const state: Reactive = reactive({
            createdPlayList: [],
            collecionPlayList: [],
            navToPlayList(uid: string) {
                router.push({path: '/my/music', query: {id: uid}})
            }
        })
        const showPlaylist = async() => {
            const id: any = localStorage.getItem('uid')
            const res = await getPlaylist(id)
            const playlist: Array<any> = res.data.playlist
            state.createdPlayList = playlist.filter((item: any) => item.creator.userId.toString() === id)
            state.collecionPlayList = playlist.filter((item: any) => item.creator.userId.toString() !== id)
            console.log(res.data.playlist)
        }
        return {
            ...toRefs(state)
        }
    }
})
</script>
<style scoped>
.el-aside{
    text-align: left;
}
.menu-item{
    display: flex;
    justify-content: space-between;
}
.aa{
    margin-left: 10px;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
}
.menu-coverImg{
    width: 40px;
    height: 40px;
}
</style>
